<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>拟态水珠</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                min-height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ffffff;
            }
            .container {
                position: relative;
                width: 60vw;
                height: 70vh;
            }
            .water-droplet {
                position: absolute;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #ffffff;
                box-shadow: -2px 8px 3px -4px rgb(255, 255, 255), -3px 16px 8px 0 #444, -2px 14px 14px #666 inset;
            }

            .water-droplet::before {
                content: "";
                position: absolute;
                top: 22%;
                left: 51%;
                width: 18%;
                height: 8%;
                border-radius: 10px;
                rotate: 30deg;
                background-color: #ffffff;
            }
            .water-droplet::after {
                content: "";
                position: absolute;
                top: 31%;
                left: 69%;
                width: 10%;
                height: 8%;
                border-radius: 10px;
                rotate: 30deg;
                background-color: #ffffff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
            <div class="water-droplet"></div>
        </div>
        <script>
            // 随机定位
            const container = document.querySelector(".container");
            const droplets = document.querySelectorAll(".water-droplet");
            droplets.forEach(droplet => {
                const x = Math.floor(Math.random() * container.offsetWidth);
                const y = Math.floor(Math.random() * container.offsetHeight);
                droplet.style.left = `${x}px`;
                droplet.style.top = `${y}px`;
            });
        </script>
    </body>
</html>
